"use client"
import React, { useState } from "react"
import { Avatar, Card, Col, Row } from "antd"
import { useAppSelector } from "@/stores"
import Title from "antd/es/typography/Title"
import Paragraph from "antd/es/typography/Paragraph"
import CalendarChart from "./components/calendar-chart"
import "./index.css"

const UserCenterPage: React.FC = () => {
  const loginUser = useAppSelector((state) => state.loginUser)
  const user = loginUser
  const [activeTabKey, setActiveTabKey] = useState<string>("record")

  return (
    <div id="user-center-page" className="max-width-content">
      <Row gutter={[16, 16]}>
        <Col xs={24} md={6}>
          <Card style={{ textAlign: "center" }}>
            <Avatar src={user.userAvatar} size={72} />
            <div style={{ marginBottom: 16 }} />
            <Card.Meta
              title={
                <Title level={4} style={{ marginBottom: 0 }}>
                  {user.userName}
                </Title>
              }
              description={<Paragraph type="secondary">{user.userProfile}</Paragraph>}
            />
          </Card>
        </Col>
        <Col xs={24} md={18}>
          <Card
            tabList={[
              {
                key: "record",
                label: "刷题记录"
              },
              {
                key: "others",
                label: "其他"
              }
            ]}
            activeTabKey={activeTabKey}
            onTabChange={(key: string) => setActiveTabKey(key)}
          >
            {activeTabKey === "record" && <CalendarChart />}
            {activeTabKey === "others" && <div>bbb</div>}
          </Card>
        </Col>
      </Row>
    </div>
  )
}

export default UserCenterPage
